<!--
/**
* Author: gaohui
* Date: 2023-03-02 11:07
* Desc: CompB 测试组件B
*/
-->

<template>
  <div class="comp-container mb10">
    <div>组件B</div>
    <div class="mt10">接收到的数据： {{ receiveMsg }}</div>
  </div>
</template>

<script name="CompB" lang="ts" setup>
import { ref, onBeforeMount, onUnmounted } from "vue";
import { showMessage } from "@/utils/msgUtil";
import { eventCompEvent } from "@/utils/eventLibrary";

onBeforeMount(() => {
  initEvent();
});

onUnmounted(() => {
  offEvent();
});

// 初始化事件监听
const initEvent = () => {
  eventCompEvent.on(handleEvent);
};

// 销毁事件
const offEvent = () => {
  eventCompEvent.off();
};

const receiveMsg = ref("");
const handleEvent = (msg) => {
  const str = `接受到一条消息，消息内容为：${msg}`;
  showMessage(str);
  receiveMsg.value = msg;
};
</script>
<style lang="scss" scoped>
.comp-container {
  height: 150px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #999999;
}
</style>
